
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

  Widget circleButton({double size = 30,@required String url,Function onPressed}) 
  {
    return InkWell(
      onTap: (){},
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            image: NetworkImage(url),
          ),
        ),
        // child: Image.network(url),
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.list),
        title: Text('Establish Your Identity'),
      ),
      body: Container(
        color: Colors.white,
        padding: EdgeInsets.all(50),
        child: Center(
          child: Column(
            children: <Widget>[
              Text('Use a social account',style: TextStyle(fontSize: 15),),
              SizedBox(height: 10,),
              Wrap(
                spacing: 30,
                children: <Widget>[
                  circleButton(
                    url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574842129718&di=286f3112bf0d21011160f0e0e1fba7fb&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F45%2F55%2F59e54f6225e15_610.jpg',
                    onPressed: (){}
                  ),
                  circleButton(
                    url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574842236017&di=5c57139ebf1543a03bbc5b389169f762&imgtype=0&src=http%3A%2F%2Fnwzimg.wezhan.cn%2Fcontents%2Fsitefiles2019%2F10099490%2Fimages%2F5438696.jpg',
                    onPressed: (){}
                  ),
                ],
              ),
              SizedBox(height: 50,),
              Text('Or',style: TextStyle(fontSize: 15),),
              SizedBox(height: 50,),
              Text('SMS verification',style:TextStyle(fontSize: 15)),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Enter phone number',
                  suffixIcon: IconButton(
                    icon: CircleAvatar(
                      backgroundColor: Colors.grey,
                      child: Text('Go'),
                    ),
                    onPressed: (){},
                  )
                ),
              ),
              SizedBox(height: 50,),
              Text('Or',style: TextStyle(fontSize: 15),),
              SizedBox(height: 50,),
              Text('Use full application for more benefits',style: TextStyle(fontSize: 15),),
              SizedBox(height: 30,),
              FlatButton.icon(
                icon: Icon(Icons.arrow_downward,color: Colors.green,),
                
                label: Text('Download and install'),
                onPressed: (){},
              )
            ],
          ),
        ),
      ),
    );
  }
}